<template>
  <view class="mine-page">
    <!-- 头部：头像+欢迎语+【登录按钮/用户名】 -->
    <view class="user-header">
      <view class="avatar">
        <!-- 替换为实际狐狸头像路径 -->
        <image src="/static/avatar-fox.png" mode="aspectFill"></image>
      </view>
      <view class="user-right">
        <!-- 固定显示“HI~欢迎回来” -->
        <text class="welcome-text">HI~欢迎回来</text>
        <!-- 登录按钮/用户名 互斥显示 -->
        <view class="login-name-container">
          <button class="login-btn" v-if="!isLogin" @click="goLogin">登录</button>
          <view class="username-block" v-else>{{ username }}</view>
        </view>
      </view>
    </view>

    <!-- 关注&话题区域（始终显示，去掉之前的v-if） -->
    <view class="follow-topic">
      <text>关注{{ followCount }}</text>
      <text class="split-line">|</text>
      <text>话题{{ topicCount }}</text>
    </view>

    <!-- 菜单：收藏、历史、设置 -->
    <view class="mine-menu">
      <view class="menu-item">
        <uni-icons type="star" size="32" color="#d00"></uni-icons>
        <text class="menu-text">收藏</text>
      </view>
      <view class="menu-item">
        <uni-icons type="clock" size="32" color="#666"></uni-icons>
        <text class="menu-text">历史</text>
      </view>
      <view class="menu-item">
        <uni-icons type="setting" size="32" color="#666"></uni-icons>
        <text class="menu-text">设置</text>
      </view>
    </view>

    <!-- 广告横幅 -->
    <view class="ad-banner">
      <image src="/static/ad-icon.png" class="ad-icon"></image>
      <text class="ad-title">瓜分30万现金红包</text>
      <button class="ad-btn">速抢 >></button>
    </view>

    <!-- 发布区域 -->
    <view class="publish-area">
      <view class="publish-icons">
        <uni-icons type="video" size="40" color="#99ccff" class="icon-item"></uni-icons>
        <uni-icons type="image" size="40" color="#ff99cc" class="icon-item"></uni-icons>
        <uni-icons type="link" size="40" color="#ffff99" class="icon-item"></uni-icons>
      </view>
      <text class="publish-desc">已有{{ publishCount }}人在这里发布身边的新鲜事</text>
      <button class="publish-btn" @click="goPublish">我也要发布</button>
      <text class="go-stroll" @click="goStroll">先去逛逛 ></text>
    </view>

    <!-- 退出登录（仅登录后显示） -->
    <view class="logout-item" v-if="isLogin" @click="handleLogout">
      <uni-icons type="logout" size="32" color="#ff3b30"></uni-icons>
      <text class="logout-text">退出登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      username: "", // 登录后会赋值为“keyar”
      followCount: 3,
      topicCount: 0,
      publishCount: "385,893"
    };
  },
  onShow() {
    // 检查登录状态：登录后userInfo里的username会是“keyar”
    const userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      this.isLogin = true;
      this.username = userInfo.username; // 赋值为登录的用户名（如keyar）
      uni.setTabBarItem({ index: 3, text: "我的" });
    } else {
      this.isLogin = false;
      uni.setTabBarItem({ index: 3, text: "未登录" });
    }
  },
  methods: {
    goLogin() {
      uni.navigateTo({ url: "/pages/login/login" });
    },
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("userInfo");
            uni.removeStorageSync("rememberedUser");
            this.isLogin = false;
            this.username = "";
            uni.setTabBarItem({ index: 3, text: "未登录" });
            uni.showToast({ title: "退出登录成功" });
          }
        }
      });
    },
    goPublish() {
      this.isLogin ? uni.navigateTo({ url: "/pages/publish/publish" }) : (
        uni.showToast({ title: "请先登录", icon: "none" }),
        this.goLogin()
      );
    },
    goStroll() {
      uni.navigateTo({ url: "/pages/explore/explore" });
    }
  }
};
</script>

<style scoped>
.mine-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

/* 头部区域 */
.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}
.avatar image {
  width: 100%;
  height: 100%;
}
.user-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.welcome-text {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}
/* 登录按钮/用户名 容器 */
.login-name-container {
  display: flex;
  align-items: center;
}
.login-btn {
  background-color: #d00;
  color: #fff;
  border-radius: 20rpx;
  padding: 10rpx 30rpx;
  font-size: 28rpx;
}
/* 用户名显示块（匹配截图红色样式） */
.username-block {
  background-color: #d00;
  color: #fff;
  border-radius: 20rpx;
  padding: 10rpx 30rpx;
  font-size: 28rpx;
}

/* 关注&话题 */
.follow-topic {
  margin-left: 140rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #666;
  display: flex;
}
.split-line {
  margin: 0 15rpx;
}

/* 横向菜单 */
.mine-menu {
  background: #fff;
  border-radius: 15rpx;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-text {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #666;
}

/* 广告横幅 */
.ad-banner {
  background: #d00;
  color: #fff;
  border-radius: 15rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}
.ad-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 15rpx;
}
.ad-title {
  font-size: 30rpx;
  flex: 1;
}
.ad-btn {
  background: #00aa7f;
  color: #fff;
  border-radius: 15rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}

/* 发布区域 */
.publish-area {
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  text-align: center;
}
.publish-icons {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}
.icon-item {
  margin: 0 30rpx;
  background: #f5f5f5;
  padding: 20rpx;
  border-radius: 10rpx;
}
.publish-desc {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 25rpx;
  display: block;
}
.publish-btn {
  background: #ff9500;
  color: #fff;
  border-radius: 30rpx;
  padding: 15rpx 60rpx;
  margin-bottom: 15rpx;
}
.go-stroll {
  font-size: 26rpx;
  color: #666;
}

/* 退出登录 */
.logout-item {
  background: #fff;
  border-radius: 15rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  cursor: pointer;
}
.logout-text {
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #ff3b30;
 
}
</style>